1"use client";
2
3import { useRouter } from "next/navigation";
4import { use, useCallback, useEffect, useMemo, useRef, useState } from "react";
5import type { RepositoryTreeEntry } from "@/lib/dto";
6import { Dialog, DialogContent, DialogTitle } from "@/ui/dialog";
7import { fuzzyMatch } from "../../util";
8
9export function RepoFileDialog({
10  open,
11  setOpen,
12  owner,
13  repo,
14  files,
15  previewsPromise,
16}: {
17  open: boolean;
18  setOpen: (open: boolean) => void;
19  owner: string;
20  repo: string;
21  files: RepositoryTreeEntry[];
22  previewsPromise: Promise<Map<string, string>>;
23}) {
24  const router = useRouter();
25  const [query, setQuery] = useState("");
26  const [selectedIndex, setSelectedIndex] = useState(0);
27  const [enableHover, setEnableHover] = useState(false);
28  const [mouseMoved, setMouseMoved] = useState(false);
29
30  const initialMousePos = useRef<{ x: number; y: number } | null>(null);
31  const previews = use(previewsPromise);
32
33  const filteredFiles = useMemo(() => {
34    if (!query) return files;
35
36    return files
37      .map((file) => ({
38        file,
39        result: fuzzyMatch(query, file.path),
40      }))
41      .filter(({ result }) => result !== null)
42      .sort((a, b) => b.result?.score - a.result?.score)
43      .map(({ file }) => file);
44  }, [files, query]);
45
46  const selectedFile = filteredFiles[selectedIndex];
47  const handleSelect = useCallback(
48    (entry: RepositoryTreeEntry) => {
49      setOpen(false);
50      router.push(`/${owner}/${repo}/${entry.path}`);
51    },
52    [owner, repo, router, setOpen],
53  );
54
55  useEffect(() => {
56    if (!open || enableHover) return;
57    const timer = setTimeout(() => setEnableHover(true), 100);
58    return () => clearTimeout(timer);
59  }, [open, enableHover]);
60
61  useEffect(() => {
62    if (!open || mouseMoved) return;
63
64    const handleMouseMove = (e: MouseEvent) => {
65      if (initialMousePos.current === null) {
66        initialMousePos.current = { x: e.clientX, y: e.clientY };
67        return;
68      }
69
70      const dx = e.clientX - initialMousePos.current.x;
71      const dy = e.clientY - initialMousePos.current.y;
72      const distance = Math.sqrt(dx * dx + dy * dy);
73
74      if (distance > 5) {
75        setMouseMoved(true);
76      }
77    };
78
79    window.addEventListener("mousemove", handleMouseMove);
80    return () => window.removeEventListener("mousemove", handleMouseMove);
81  }, [open, mouseMoved]);
82
83  useEffect(() => {
84    if (!open) {
85      setQuery("");
86      setSelectedIndex(0);
87      setEnableHover(false);
88      setMouseMoved(false);
89      initialMousePos.current = null;
90    }
91  }, [open]);
92
93  useEffect(() => {
94    if (selectedIndex >= filteredFiles.length) {
95      setSelectedIndex(Math.max(0, filteredFiles.length - 1));
96    }
97  }, [selectedIndex, filteredFiles]);
98
99  useEffect(() => {
100    if (!open) return;
101
102    const handleKeyDown = (e: KeyboardEvent) => {
103      if (e.key === "u" && e.ctrlKey) {
104        e.preventDefault();
105        setQuery("");
106      } else if (e.key === "ArrowDown" || (e.key === "n" && e.ctrlKey)) {
107        e.preventDefault();
108        setSelectedIndex((prev) =>
109          Math.min(prev + 1, filteredFiles.length - 1),
110        );
111      } else if (e.key === "ArrowUp" || (e.key === "p" && e.ctrlKey)) {
112        e.preventDefault();
113        setSelectedIndex((prev) => Math.max(prev - 1, 0));
114      } else if (e.key === "Enter") {
115        e.preventDefault();
116        if (selectedFile) {
117          handleSelect(selectedFile);
118        }
119      } else if (e.key === "Escape") {
120        e.preventDefault();
121        setOpen(false);
122      }
123    };
124
125    window.addEventListener("keydown", handleKeyDown);
126    return () => window.removeEventListener("keydown", handleKeyDown);
127  }, [open, setOpen, filteredFiles.length, selectedFile, handleSelect]);
128
129  return (
130    <Dialog open={open} onOpenChange={setOpen}>
131      <DialogContent
132        // replicate fzf-lua's offset & positioning
133        className="max-w-[80vw]! max-h-[85vh]! top-[47.75vh]! left-[51vw]! w-full h-full p-0 gap-0 flex flex-col"
134        showOverlay={false}
135      >
136        <DialogTitle className="sr-only">File search</DialogTitle>
137
138        <div className="flex flex-row flex-1 min-h-0">
139          <div className="w-2/5 border-r border-border flex flex-col">
140            <div className="border-b border-border px-4 h-9 flex flex-row items-center shrink-0">
141              <div className="flex-1 flex items-center text-sm font-mono border-0 p-0 m-0 leading-normal">
142                <span className="text-primary/60">{`${repo}/`}</span>
143                <input
144                  type="text"
145                  value={query}
146                  onChange={(e) => setQuery(e.target.value)}
147                  className="flex-1 bg-transparent outline-none"
148                  autoFocus
149                />
150              </div>
151              <div className="text-xs text-muted-foreground whitespace-nowrap">
152                {filteredFiles.length}/{files.length}
153              </div>
154            </div>
155            <div className="overflow-y-auto scrollbar-none flex-1">
156              {filteredFiles.map((entry, index) => (
157                <button
158                  type="button"
159                  key={entry.path}
160                  className={`flex flex-row w-full px-4 text-sm font-mono cursor-pointer truncate ${
161                    index === selectedIndex
162                      ? "bg-accent text-accent-foreground"
163                      : ""
164                  }`}
165                  onMouseEnter={() =>
166                    enableHover && mouseMoved && setSelectedIndex(index)
167                  }
168                  onClick={() => handleSelect(entry)}
169                >
170                  {entry.path}
171                </button>
172              ))}
173            </div>
174          </div>
175
176          <div className="w-3/5 flex flex-col text-sm scrollbar-none overflow-y-hidden">
177            {selectedFile && previews.has(selectedFile.path) && (
178              <div
179                className="px-2 py-2"
180                dangerouslySetInnerHTML={{
181                  __html: previews.get(selectedFile.path)!,
182                }}
183              />
184            )}
185          </div>
186        </div>
187      </DialogContent>
188    </Dialog>
189  );
190}
191